<template>
    <div class="layadmin-user-login layadmin-user-display-show">
        <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" media="all">
        <link id="layuicss-layer" rel="stylesheet" type="text/css" href="static/layui/css/modules/layer/default/layer.css" />
        <link id="layuicss-layuiAdmin" rel="stylesheet" type="text/css" href="static/layui/style/admin.css" />
        <link rel="stylesheet" type="text/css" href="static/layui/style/login.css" />

        <div id="LAY-user-login">
            <div class="layadmin-user-login-main">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <h2>重置密码</h2>
                    <p>坡特云后台管理系统</p>
                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                        <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass" placeholder="新密码" class="layui-input"/>
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
                        <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码" class="layui-input"/>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-forget-resetpass">重置新密码</button>
                    </div>
                </div>
            </div>

            <div class="layui-trans layadmin-user-login-footer">

                <p>© 2018 <a href="http://www.potyun.com/" target="_blank">potyun.com</a></p>
            </div>

        </div>
    </div>
</template>

<script>
    /**
     * ● vue官网 使用介绍文档
     * https://cn.vuejs.org/guide/introduction.html
     *
     * ● vue官网 API 参考文档
     * https://cn.vuejs.org/api/
     *
     * ● vue八大生命周期
     * https://www.cnblogs.com/qianduan-Wu/p/16917161.html
     *
     * ● vue中created、beforeMount、mounted、computed、watch、methods区别与执行顺序：
     * https://zhuanlan.zhihu.com/p/474610997
     *
     * ● vue生命周期及router按需加载：
     * https://blog.51cto.com/u_15127513/4198980
     */
    export default {
        /**
         * Props 声明
         * https://cn.vuejs.org/guide/components/props.html#prop-passing-details
         *
         * 一个组件需要显式声明它所接受的 Props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。
         * Props 需要使用 props 选项来定义。
         */
        props: [],
        /**
         * 组件注册
         * https://cn.vuejs.org/guide/components/registration.html
         *
         * （1）一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。
         * （2）组件注册有两种方式：全局注册和局部注册。
         * （3）局部注册需要使用 components 选项。
         */
        components: {},
        /**
         * data() 返回的属性将会成为响应式的状态，并且暴露在 `this` 上。
         */
        data() {
            return {};
        },
        /**
         * created 执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。
         * created钩子函数 在模板渲染成html前调用，通常用来 初始化某些属性值，然后再渲染成视图。
         */
        created() {
            console.log("created");
        },
        /**
         * beforeMount 这一步的时候，模版已经在内存中编译好了，但是尚未挂载到页面中去。
         */
        beforeMount() {
            console.log("beforeMount");
        },
        /**
         * computed 是在DOM执行完成后立马执行（如：赋值）。
         */
        computed: {
        },
        /**
         * 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
         * DOM操作一般是在mounted钩子函数中进行。
         * mounted 是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行。
         */
        mounted() {
            console.log("mounted");
            document.querySelector('body').setAttribute('style', 'background-color:#f2f2f2');
        },
        /**
         * 侦听器
         * https://cn.vuejs.org/guide/essentials/watchers.html
         *
         * 使用 watch 选项，在每次响应式属性发生变化时触发一个函数。
         * 默认加载的时候先 computed 再 watch，不执行 methods；等触发某一事件后，则是 先 methods 再 watch。
         */
        watch: {},
        /**
         * methods 方法有一定的触发条件，如click等。
         * 所有方法都应该在 methods 里定义，在 mounted 或 created 里面使用 this 调用，通过这种方式 实现初始化。
         */
        methods: {},
        /**
         * Vue选项：filters过滤器
         * https://v2.vuejs.org/v2/guide/filters.html?redirect=true
         *
         * 过滤器是一种在模板中处理数据的便捷方式，它们特别适合对 字符串 和 数字 以及 日期 进行简单的显示变化。
         */
        filters: {},
        /**
         * 每次进入路由时，都会触发beforeRouteEnter。beforeRouteEnter一般会配合keep-alive使用。
         *
         * @param to 跳转到哪个页面
         * @param from 从哪个页面跳转
         * @param next 相当于一个按钮开启一样
         */
        beforeRouteEnter(to, from, next) {
            console.log("beforeRouteEnter");
            next();
        },
        /**
         * 离开路由之前执行的函数，可用于页面的反向传值，页面跳转。
         * @param to 跳转到哪个页面
         * @param from 从哪个页面跳转
         * @param next 相当于一个按钮开启一样
         */
        beforeRouteLeave(to, from, next) {
            console.log("beforeRouteLeave");
            next();
        },
        /**
         * 页面切换路由会触发 activated 钩子函数。
         * activated 是组件被激活后的钩子函数，每次回到页面都会执行。
         */
        activated() {
            console.log("activated");
        },
        /**
         * vue实例销毁之前调用
         */
        beforeDestroy() {
        },
    };
</script>

<style lang="less" scoped>
    // 默认字体大小
    div, span, p {
        font-size: 14px;
    }
    a {
        font-size: 14px;
    }
</style>
